import Vue from 'vue'
import Router from 'vue-router'

// 引入多个动态路由模块
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

// 将 VueRouter 挂载为 Vue 的插件
Vue.use(Router)

/* 布局容器：包含了项目最基础的结构 */
// @ 符号代表的 src 目录
import Layout from '@/layout'

// 动态路由表，项目中不同的用户可以访问不同的功能
export const asyncRoutes = [
  departmentsRouter, // 组织架构：公司的人员架构
  settingRouter, // 角色管理：角色管理
  employeesRouter, // 员工管理：给员工分配角色
  permissionRouter, // 权限管理：配置各种权限点

  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]

// 静态路由表，项目中每个用户都可以访问的功能
// constantRoutes 数组中是定义好的路由规则
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/', // 一般是代表默认路由
    component: Layout, // 当访问 / 时，展示的是 Layout 布局容器组件
    redirect: '/dashboard', // 重定向
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },

  {
    path: '/excel',
    component: Layout,
    hidden: true, // 导入页面只需要点击跳转,无需左侧导航
    children: [{
      path: '',
      name: 'excel',
      component: () => import('@/views/excel/index.vue')
    }]
  }

  // 404 page must be placed at the end !!!
  // 问题: 做了动态路由和addRoutes以后, 为何在动态路由路径时, "刷新"网页会直接进入404页面?
  // (1): 刷新时, 所有代码重新执行->路由new Router和vuex的所有值回归初始化
  // (2): 地址栏的地址还是动态路由路径, 上来刚开始就和new Router里规则(当前静态数组里挨个对象path配), 匹配失败来到了当前path: * 被重定向到了404
  // 问题2: 那我们不是发请求拿到用户信息数据, 过滤出动态的, 添加上去那应该能匹配到呀?
  // (1): 网络请求是异步的, 在你数据回来之前, 我们的路由已经尝试匹配了一次, 找不到直接404了
  // 先匹配路由规则 -> 如果规则失败直接走redirect重定向 -> 路由全局前置守卫->决定是否放行 -> 路由守卫里有个异步的网络请求, 回来加入动态的路由规则进路由表
  // 解决: 把path兜底的404路由规则放到动态路由数组后面
  // { path: '*', redirect: '/404', hidden: true }

  // 问题: 白屏幕了
  // 原因: 动态路由路径在上来的时候, 路由规则数组里没有匹配到任何符合path路径规则对象, 也没有404, 所以路由出口处什么组件都不挂
]

// 对 VueRouter 进行实例化
const createRouter = () =>
  new Router({
    mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    // 组合到一起组成路由表
    // routes: [...constantRoutes, ...asyncRoutes] // 配置路由规则 [{}, {}, {}, {}, {}]
    // 上来先加载静态的, 动态路由规则对象数组, 需要在路由守卫中, 获取到当前登录用户信息
    // 根据权限点, 筛选动态路由规则数组里的某几个对象出来, 再用router对象的addRoutes方法
    // 添加回到路由表中
    routes: constantRoutes // 配置路由规则
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

// 清除内存里router路由对象能匹配的路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // matcher所谓的内存里能匹配到的路由规则数组 -> 原来的动态添加的, 给覆盖掉
}

export default router
